<template>
  <div class="chat-container">
    <div class="chat-header">
      <img class="doctor-avatar" :src="doctorAvatar" alt="医生头像" />
      <div class="doctor-name">医生姓名</div>
    </div>
    <div class="chat-messages">
      <div class="message doctor-message">
        <p>医生默认对话语</p>
      </div>
      <!-- 这里可以动态添加更多的对话消息 -->
    </div>

    <div class="chat-input">
      <div class="tags">
        <span class="tag" v-for="tag in tags" :key="tag" @click="handleTagClick(tag)">{{ tag }}</span>
      </div>
      <textarea v-model="messageContent" placeholder="输入你的消息..."></textarea>
      <div class="input-actions">
        <button @click="sendMessage">发送</button>
        <button>曾经问过</button>
        <button>语音输入</button>
        <button>传入图片</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      doctorAvatar: 'path/to/doctor/avatar.jpg', // 替换为医生的头像图片路径
      messageContent: '',
      tags: ['头痛', '发热', '咳嗽', '其他'] // 病情标签数组
    };
  },
  methods: {
    sendMessage() {
      // 发送消息的逻辑
      console.log('发送消息:', this.messageContent);
      this.messageContent = ''; // 清空输入框
    },
    handleTagClick(tag) {
      // 处理标签点击事件
      console.log('标签被点击:', tag);
      // 这里可以添加选择标签后的逻辑，比如添加到消息中或执行其他操作
    }
  }
};
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 10px;
  box-sizing: border-box;
  background-color: #f5f5f5; /* 背景色 */
  font-family: 'Arial', sans-serif; /* 字体 */
}

.chat-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.doctor-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover; /* 确保图片适应容器 */
  margin-right: 10px;
}

.doctor-name {
  font-weight: bold;
}

.chat-messages {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff; /* 消息背景色 */
  overflow-y: auto; /* 超出部分滚动显示 */
  border-radius: 5px; /* 圆角 */
}

.message {
  padding: 5px 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  max-width: 80%; /* 限制消息宽度 */
  word-wrap: break-word; /* 换行 */
}

.doctor-message {
  background-color: #f0f0f0;
  align-self: flex-end;
}

.patient-message {
  background-color: #e0ffe0;
  align-self: flex-start;
}

.tags {
  display: flex;
  margin-bottom: 10px;
}

.tag {
  padding: 5px 10px;
  margin-right: 5px;
  background-color: #eee;
  border-radius: 5px;
  cursor: pointer;
  user-select: none; /* 禁止用户选择文本 */
}
</style>;
